<template>
  <div>
    <el-dialog
      :title="formtype == 1 ? '新增岗位' : '编辑岗位'"
      class="el_dialog_pro1"
      width="897px"
      @close="cancel"
      :visible.sync="dialogFormVisible"
    >
      <!-- <div class="dialog_body"> -->
      <el-form
        :model="listfrom"
        ref="formName"
        :rules="rules"
        label-position="left"
      >
        <el-row>
          <el-col :span="12" class="el_col1">
            <el-form-item
              prop="No"
              label="岗位编号"
              :label-width="formLabelWidth"
            >
              <el-input
                class="input_border_bottom"
                v-model="listfrom.No"
                placeholder="请输入岗位编号"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="el_col1 pad_left">
            <el-form-item
              prop="Name"
              label="岗位名称"
              :label-width="formLabelWidth"
            >
              <el-input
                class="input_border_bottom"
                v-model="listfrom.Name"
                placeholder="请输入岗位名称"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="el_col1">
            <el-form-item
              prop="OrganizationId"
              label="隶属部门"
              :label-width="formLabelWidth"
            >
              <!-- <el-select
                class="select_border_bottom"
                v-model="listfrom.OrganizationId"
                @change="orangchange"
                placeholder="请选择隶属部门"
              >
                <el-option
                  :label="item.Name"
                  :value="item.Id"
                  v-for="(item, index) in menus"
                  :key="index"
                ></el-option>
              </el-select>-->
              <el-cascader
                v-model="value"
                class="select_border_bottom"
                :props="defaultProps"
                :options="menus"
                @change="handleChange"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="12" class="el_col1 pad_left">
            <el-form-item
              prop="LoginMethod"
              label="登陆方式"
              :label-width="formLabelWidth"
            >
              <el-select
                class="select_border_bottom"
                v-model="listfrom.LoginMethod"
                placeholder="请选择登录方式"
              >
                <el-option
                  :label="item.label"
                  :value="item.value"
                  v-for="(item, index) in $optiondata.LoginMethod"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" class="el_col1">
            <el-form-item
              prop="SuperiorType"
              label="上级类型"
              :label-width="formLabelWidth"
            >
              <el-select
                class="select_border_bottom"
                v-model="listfrom.SuperiorType"
                placeholder="请选择上级类型"
                @change="selectchang"
              >
                <el-option
                  v-for="(item, index) in $optiondata.SuperiorType"
                  :label="item.label"
                  :value="item.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            class="el_col1 pad_left"
            v-if="listfrom.SuperiorType"
          >
            <el-form-item
              prop="Superior"
              label="直属上级"
              :label-width="formLabelWidth"
            >
              <el-select
                class="select_border_bottom"
                v-model="listfrom.Superior"
                v-if="listfrom.SuperiorType != 1"
                placeholder="请选择直属上级"
              >
                <el-option
                  v-for="(item, index) in peopleoption"
                  :label="item.Name"
                  :value="item.Id"
                  :key="index"
                ></el-option>
              </el-select>
              <el-select
                class="select_border_bottom"
                v-model="listfrom.Superior"
                v-else
                placeholder="请选择直属上级"
              >
                <el-option
                  :label="item.Name"
                  :value="item.Id"
                  v-for="(item, index) in postmainoption"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" class="el_col1">
            <el-form-item
              prop="Desc"
              label="描述"
              :label-width="formLabelWidth"
            >
              <el-input
                class="textarea_border_bottom"
                v-model="listfrom.Desc"
                type="textarea"
                auto-complete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="el_tabs_pro">
        <el-button type="primary" @click="add" class="add_btn" size="small"
          >新增</el-button
        >
        <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">
          <el-tab-pane label="岗位职责" name="first">
            <div class="contact_list">
              <table-cmp
                style="width:100%"
                class="table_cmp"
                :loading="loading"
                :table-data="tableData"
                height="166"
                :table-label="tableLabel"
                @handleButton="handleButton"
                @rowClick="rowClick"
                @cellClick="cellClick"
                @handleSortChange="handleSortChange"
                @handleSelectionChange="handleSelectionChange"
              ></table-cmp>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="commit">确 定</el-button>
      </div>
      <!-- </div> -->
    </el-dialog>
    <postmainpop ref="postmainpop"></postmainpop>
  </div>
</template>

<script>
var occupancyDisplay = {
  template: `<div>
            <el-button type="text" size="small">编辑</el-button>
            <el-button type="text" size="small">删除</el-button>
  
  </div>`,
  props: ["row"],
  created() { },
  methods: {
    shenhDetail(row) {
      this.$emit("shenh-detail", row);
      // console.log(this.row,'1111111');
    },
    seeDetail(row) {
      this.$emit("see-detail", row);
      // console.log(this.row,'1111111');
    }
  }
};
var that;
import postmainpop from "./postmainpop";
export default {
  data() {
    return {
      dialogFormVisible: false,
      loading: false,
      formtype: 1,
      tbasindex: 0,
      tableData: [],
      value: [],
      postmainoption: [],
      menus: [],
      peopleoption: [],
      defaultProps: {
        children: 'Children',
        label: 'Name',
        value: 'Id',
        checkStrictly: true,
      },
      listfrom: {
        No: "",
        Name: "",
        OrganizationId: "",
        LoginMethod: "1",
        SuperiorType: "",
        Superior: "",
        Desc: ""
      },
      tableLabel: [
        {
          label: "类型",
          param: "Status",
          width: "100",
          align: "center",
          sortable: false
        },
        { label: "描述", param: "Remark", align: "center" },
        {
          label: "操作",
          align: "center",
          width: "300",
          component: occupancyDisplay,
          listeners: {
            "dyapi-detail"(row) {
              that.dyapiDetail(row);
            },
            "delete-detail"(row) {
              that.deleteDetail(row);
            }
          }
        }
      ],
      activeName2: "first",
      formLabelWidth: "80px",
      rules: {
        Name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        No: [{ required: true, message: "请输入编号", trigger: "blur" }],
        OrganizationId: [
          { required: true, message: "请选择组织", trigger: "blur" }
        ],
        LoginMethod: [
          { required: true, message: "请选择登录方式", trigger: "blur" }
        ],
        // SuperiorType: [
        //   { required: true, message: "请选择上级类型", trigger: "blur" }
        // ],
        // Superior: [
        //   { required: true, message: "请选择上级类型", trigger: "blur" }
        // ],
        Desc: [{ required: true, message: "请输入描述", trigger: "blur" }]
      }
    };
  },
  watch: {
    "$store.state.Humanmanage.QueryStaff": function (data) {
      let DataContent = data.ReturnData.Data;
      this.peopleoption = DataContent;
    },
    "$store.state.Humanmanage.QueryJobs": function (data) {
      let DataContent = data.ReturnData.Data;
      if (data.RequestId == 2) {
        let arr = []
        DataContent.forEach(item => {
          if (item.Id != this.listfrom.Id) {
            // delete item
            arr.push(item)
            // console.log(item);
          }
        });
        this.postmainoption = JSON.parse(JSON.stringify(arr));
      }
    },
    "$store.state.Humanmanage.SaveJobs": function (data) {
      this.$message({
        type: "success",
        message: "操作成功!"
      });
      this.cancel();
      this.$parent.getlistdata();
    }
  },
  components: {
    postmainpop
  },
  created() {
    that = this;
    this.getpeopleoption();
  },
  methods: {
    handleChange(e) {
      this.listfrom.OrganizationId = e[e.length - 1];
      // console.log(this.listfrom.OrganizationId,e);
      this.orangchange();
      this.listfrom.Superior = '';
      this.listfrom.SuperiorType = '';
    },
    orangchange() {
      this.getpeopleoption();
      let obj1 = {
        MN: "QueryJobs",
        RequestId: 2,
        UserId: 1,
        DataContent: {
          IsStop: "1",
          OrganizationId: this.listfrom.OrganizationId
        }
      };
      this.MIX_send(obj1);
    },
    selectchang() {
      // console.log('1111')
      this.listfrom.Superior = "";
    },
    cancel() {
      this.listfrom = {
        No: "",
        Name: "",
        OrganizationId: "",
        LoginMethod: "1",
        SuperiorType: "",
        Superior: "",
        Desc: ""
      };
      this.dialogFormVisible = false;
    },
    getpeopleoption() {
      let obj = {
        MN: "QueryStaff",
        RequestId: 2,
        UserId: 1,
        DataContent: {
          IsStop: "1",
          OrganizationId: this.listfrom.OrganizationId
        }
      };
      this.MIX_send(obj);
    },
    commit() {
      this.$refs.formName.validate(valid => {
        if (valid) {
          let obj = {
            MN: "SaveJobs",
            RequestId: 1,
            UserId: 1,
            DataContent: this.listfrom
          };
          this.MIX_send(obj);
        } else {
          return false;
        }
      });
    },
    onSelected(data) {
      // this.dialogFormVisible=false
      console.log(data);
    },
    handleClick(data) {
      // this.dialogFormVisible=false
      // console.log(data.index);
      this.tbasindex = data.index;
    },
    add() {
      if (this.tbasindex == 0) {
        this.$refs.postmainpop.dialogFormVisible = true;
      }
    },
    handleButton() { },
    rowClick() { },
    cellClick() { },
    handleSortChange() { },
    handleSelectionChange() { }
  }
};
</script>

<style lang="less" scoped>
.dialog_body {
  width: 100%;
}
.pad_left {
  padding-left: 15px;
}
.el_tabs_pro {
  margin-top: 10px;
  width: 100%;
  position: relative;
}
.add_btn {
  position: absolute;
  top: 5px;
  right: 0px;
  z-index: 12;
}
.contact_list {
  width: 100%;
  height: 165px;
}
</style>